<template>
  <page-card title="数据源拉取日志"
             :need-back="true">
    <div>
      <div class="data-source-item">
        <a-descriptions size="middle"
                        :column="{ xxl: 5, xl: 4, lg: 4, md: 4, sm: 3, xs: 2 }">
          <a-descriptions-item label="数据库类型">
            {{ type }}
          </a-descriptions-item>
          <a-descriptions-item label="地址">
            {{ hostname }}
          </a-descriptions-item>
          <a-descriptions-item label="端口号">
            {{ port }}
          </a-descriptions-item>
          <a-descriptions-item label="实例名">
            {{ instanceName }}
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            {{ state==='1'?'启用':'禁用' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="row-search">
        <a-row type="flex"
               justify="center"
               style="margin-bottom:20px"
               align="middle"
               :gutter="5">
          <a-col>
            拉取人：
          </a-col>
          <a-col :span="3"
                 style="display:flex;">
            <a-input v-model="params.username"
                     placeholder="请输入"
                     clearable>
            </a-input>
          </a-col>
          <a-col>
            拉取时间：
          </a-col>
          <a-col :span="5">
            <a-range-picker show-time
                            @change="onChange"
                            format="YYYY-MM-DD"
                            :value="searchTime"
                            style="width:100%">
              <a-icon slot="suffixIcon"
                      type="schedule" />
            </a-range-picker>
          </a-col>
          <a-col :span="1"></a-col>
          <a-col>
            <a-button type="primary"
                      icon="search"
                      style="margin-left:10px;"
                      @click="search()">
              查询
            </a-button>
          </a-col>
          <a-col flex="1">
            <a-button @click="reset()"
                      icon="reload">
              重置
            </a-button>
          </a-col>
        </a-row>
      </div>
      <div class="public-list-panel">
        <a-table :columns="column"
                 :data-source="data"
                 customCell="center"
                 :rowKey="record => record.createTime"
                 customHeaderCell="center"
                 @change="handleTableChange"
                 :pagination="pagination">
          <template slot="result"
                    slot-scope="text, record">
            <a style="color:#1890ff"
               v-if="record && record.result=='1'">
              成功
            </a>
            <a style="color:#e90"
               v-else-if="record && record.result=='2'">
              部分成功
            </a>
            <a style="color:red"
               v-else>
              失败
            </a>
          </template>
          <template slot="cause"
                    slot-scope="text, record">
            <span style="white-space: pre-wrap;">{{ record.cause }}</span>
          </template>
        </a-table>
      </div>
    </div>
  </page-card>
</template>

<script>

import { getLogList } from '../../api/data-source/index'

export default {
  name: 'YfDataSourceLog',
  extends: null,
  mixins: [],
  data () {
    return {
      type: this.$route.query.type,
      hostname: this.$route.query.hostname,
      port: this.$route.query.port,
      state: this.$route.query.state,
      instanceName: this.$route.query.instanceName,
      metadataId: this.$route.query.metadataId,
      data: [],
      column: [{
        title: '拉取结果',
        key: 'result',
        dataIndex: 'result',
        scopedSlots: { customRender: 'result' },
        align: 'center'
      }, {
        title: '结果原因',
        dataIndex: 'cause',
        scopedSlots: { customRender: 'cause' },
        key: 'cause',
        align: 'center'
      }, {
        title: '拉取人',
        dataIndex: 'username',
        key: 'username',
        align: 'center'
      }, {
        title: '拉取后表数量',
        dataIndex: 'tableNum',
        key: 'tableNum',
        align: 'center'
      }, {
        title: '拉取时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center'
      }],
      pagination: {
        current: 1, // 默认当前页数
        pageSize: 10, // 默认当前页显示数据的大小
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: total => `共 ${total} 条` // 显示总数
      },
      // 查询参数
      params: {
        username: null,
        startTime: '',
        endTime: '',
        metadataId: this.$route.query.metadataId
      },
      searchTime: []
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getLogData()
  },
  activated () {
    this.getLogData()
  },
  methods: {
    // 获取数据源日志列表
    getLogData () {
      const params = Object.assign(this.params, {
        page: {
          current: this.pagination.current,
          size: this.pagination.pageSize
        }
      })
      getLogList(params).then(response => {
        this.data = response.list
        this.pagination.total = response.totalCount
        this.pagination.pageSize = response.pageSize
      })
    },
    // 重置搜索条件
    reset () {
      this.params.username = ''
      this.params.startTime = ''
      this.params.endTime = ''
      this.searchTime = []
      this.search()
    },
    // 搜索
    search () {
      this.data = []
      this.pagination.current = 1
      this.getLogData()
    },
    // 时间改变
    onChange (date, dateString) {
      this.searchTime = date
      this.params.startTime = dateString[0]
      this.params.endTime = dateString[1]
    },
    // 分页点击事件
    handleTableChange (pagination) {
      this.pagination = pagination
      this.getLogData()
    }
  }
}
</script>

<style lang="less" scoped>
.data-source-item {
  background-color: #f2f2f29d;
  font-size: calc(var(--font-size-20) + 10px);
}
.row-search {
  padding-top: 20px;
}
</style>